<template>
    <el-dialog :title="title" :visible.sync="showEditAdd" width="30%" :before-close="roleclose">
          <el-form :model="addForm" :rules="rules" ref="addForm" label-width="90px">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="addForm.username" style="width:100%;" placeholder="用户登录时使用，全局唯一初始密码为：用户名+888"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="nickname">
              <el-input v-model="addForm.nickname" style="width:100%;" placeholder="员工真实姓名"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
              <el-input v-model="addForm.mobile" style="width:100%;" placeholder="员工可通过手机自行找回密码"></el-input>
            </el-form-item>
            <el-form-item label="所属单位" prop="company_id">
                <el-tree
                :data="treeList"
                :props="defaultProps"
                :show-checkbox="true" 
                :check-on-click-node="true" 
                :check-strictly="true"
                node-key="id" 
                @check="treeCheck"
                ref="treeForm">
            </el-tree>
            </el-form-item>
            <el-form-item label="角色" prop="role_id">
                <el-select v-model="addForm.role_id" placeholder="为员工分配角色/权限" style="width:100%;">
                    <el-option
                    v-for="item in roleOptions"
                    :key="item.id"
                    :label="item.role_name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancelBtn">取 消</el-button>
            <el-button type="primary" @click="confirmAddform">保 存</el-button>
          </div>
    </el-dialog>
</template>
<script>
import {roleList,userAdd} from '@/api/release'
export default{
    props:{
        title:[String],
		showEditAdd:[Boolean],
        treeList:[Array],
        editRow:[Object]
	},
    data(){
        const validatePhone = (rule, value, callback) => {
            // 判断输入框中是否输入手机号
            if (!value) {
                callback(new Error('手机号不能为空'))
            }
            //正则表达式进行验证手机号，从1开始，第二位是345789中的任意一位，以9数字结尾
            if (!/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(value)) {
                callback(new Error('手机号格式不正确'))
            }
            callback()
        }
        return{
            firmOptions:[], //所属单位
            roleOptions:[], //角色
            addForm:{
                username:"",
                nickname:"",
                mobile:'',
                company_id:"",
                role_id:''
            },
            rules:{
                username:[{ required: true, message: '请输入用户名', trigger: 'blur' }],
                nickname:[{ required: true, message: '请输入姓名', trigger: 'blur' }],
                mobile:[{ required: true, message: '请输入手机号', trigger: 'blur',min: 11, max: 11, message: '长度不符合', validator: validatePhone }],
                company_id:[{ required: true, message: '请选择所属单位', trigger: 'change' }],
                role_id:[{ required: true, message: '请选择角色', trigger: 'change' }],
            },
            defaultProps:{
                value:'id',
                label:"company_name",
                children:"children"
            },
            newRowObj:{},
        }
    },
    created(){
        this.getRoleData();
    },
    watch:{
        editRow(newVal, oldVal){
            this.newRowObj = newVal;
            if(Object.values(newVal).length>0){
                this.addForm.username=newVal.username;
                this.addForm.nickname=newVal.nickname;
                this.addForm.mobile=newVal.mobile;
                this.addForm.company_id=newVal.company_id;
                this.addForm.role_id=newVal.role_id;
                let ii = JSON.parse(newVal.company_id);
                this.$nextTick( ()=> {
                    this.$refs.treeForm.setChecked(ii, true, false);
                });
            }
        }
    },
    methods:{
        //角色列表
        getRoleData(){
            roleList({page:this.page,limit:this.limit,role_name:name}).then(res=>{
                this.roleOptions = res.data;
            });
        },
        /**点击取消**/
        cancelBtn(){
            this.$emit('cancelHandle');
            this.$refs.addForm.resetFields();
            this.reset();
        },
        /**点击保存**/
        confirmAddform(){
            let arr = this.$refs.treeForm.getCheckedKeys();
            this.addForm.company_id = arr.toString();
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    userAdd(this.addForm).then(res => {
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        this.$emit('saveSucDialog');
                        this.reset();
                    });
                } else {
                    return false;
                }
            });
        },
        /**树状列表使其单选**/ 
        treeCheck(node,list){
            this.$refs.treeForm.setCheckedKeys([node.id]);
        },
        roleclose(){
            this.$emit('cancelHandle');
            this.$refs.addForm.resetFields();
            this.reset();
        },
        reset(){
           // 把已选中的复选框清除
            this.$nextTick(()=>{
                this.$refs.treeForm.setCheckedKeys([]);
            })
        },
    }

    
}
</script>
<style lang="sass" scoped>

</style>